<script setup lang='ts'>
import { ES3DTileset } from "esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main";
import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { SceneTree } from 'xbsj-xe2/dist-node/xe2';
import { Destroyable } from "xbsj-xe2/dist-node/xe2-base-utils";
import { ObjResettingWithEvent } from "xbsj-xe2/dist-node/xe2-utils";
import RightList from '../../components/RightList.vue';
import SliderTime from '../../components/SliderTime.vue';
import { vue3Xe2Bind } from '../../scripts/vue3Xe2Bind';
const sceneTree = inject('sceneTree') as SceneTree
const isshow = ref(false)
const showName = ref('请选中瓦片图层')
const selectedItems = sceneTree.selectedItems
const chlastSelectedItem = () => {
    isshow.value = false
    showName.value = '请选中瓦片图层'
    const lastSelectedItem = sceneTree.lastSelectedItem
    if (!lastSelectedItem) return
    if (lastSelectedItem.type == 'ES3DTileset') {
        if (lastSelectedItem.sceneObject instanceof ES3DTileset) {
            maximumScreenSpaceError.value = lastSelectedItem.sceneObject.maximumScreenSpaceError
            czmLuminanceAtZenith.value = lastSelectedItem.sceneObject.czmLuminanceAtZenith
            czmLuminanceAtZenithSlider.value = czmLuminanceAtZenith.value * 100
        }
        showName.value = lastSelectedItem.name
        isshow.value = true
    } else {
        showName.value = '请选中瓦片图层'
        isshow.value = false
    }
}
const beDefault = (type: string) => {
    //显示精度
    if (type == 'maximumScreenSpaceError') {
        maximumScreenSpaceError.value = 16
    } else if (type == 'czmLuminanceAtZenith') {
        czmLuminanceAtZenith.value = 0.2
        czmLuminanceAtZenithSlider.value = czmLuminanceAtZenith.value * 100
    } else if (type == 'czmMaximumMemoryUsage') {
        czmMaximumMemoryUsage.value = 512
    }
}
//显示精度
const maximumScreenSpaceError = ref(16.0)
const maximumScreenSpaceErrorChange = (val: number) => {
    maximumScreenSpaceError.value = val
}

//材质底色
const czmLuminanceAtZenith = ref(0.2)
const czmLuminanceAtZenithSlider = ref(2)
const czmLuminanceAtZenithChange = (val: number) => {
    czmLuminanceAtZenith.value = val / 100
}
//显存
const czmMaximumMemoryUsage = ref(512)
const czmMaximumMemoryUsageChange = (val: number) => {
    // console.log(val);
    czmMaximumMemoryUsage.value = val
}
class ES3DTilesetController extends Destroyable {
    constructor(private _eS3DTileset: ES3DTileset) {
        super();
        this.d(vue3Xe2Bind(maximumScreenSpaceError, [this._eS3DTileset, 'maximumScreenSpaceError'], 16));//最大精度
        this.d(vue3Xe2Bind(czmLuminanceAtZenith, [this._eS3DTileset, 'czmLuminanceAtZenith'], 0.2));//材质底色
        this.d(vue3Xe2Bind(czmMaximumMemoryUsage, [this._eS3DTileset, 'czmMaximumMemoryUsage'],512));//显存

    }
}
onMounted(() => {
    const objResetting = new ObjResettingWithEvent(sceneTree.selectedItems.changedEvent, () => {
        const { lastSelectedItem } = sceneTree;
        if (!lastSelectedItem) return undefined;
        const { sceneObject } = lastSelectedItem;
        if (!sceneObject) return undefined;
        if (sceneObject.typeName !== 'ES3DTileset') return undefined;
        if (!(sceneObject instanceof ES3DTileset)) return undefined;
        return new ES3DTilesetController(sceneObject);
    });
    chlastSelectedItem()
    const dispose = selectedItems.changedEvent.don(chlastSelectedItem);
    onBeforeUnmount(dispose)
    onBeforeUnmount(() => objResetting.destroy());
});
</script>

<template>
    <RightList :title="`可视化--${showName}`">
        <div class="images_relative_box">
            <label @dblclick="beDefault('maximumScreenSpaceError')"> {{ '显示精度' }}</label>
            <SliderTime :width="159" v-model:value="maximumScreenSpaceError" :max="256"
                @change="maximumScreenSpaceErrorChange" :realVal="`${maximumScreenSpaceError}`" :disabled="!isshow" />
            <span>{{ maximumScreenSpaceError }}</span>
        </div>
        <!-- <div class="images_relative_box">
            <label @dblclick="beDefault('czmLuminanceAtZenith')"> {{ '材质底色' }}</label>
            <SliderTime :width="158" v-model:value="czmLuminanceAtZenithSlider" :step="1" :max="500"
                @change="czmLuminanceAtZenithChange" :realVal="`${czmLuminanceAtZenith}`" :disabled="!isshow" />
            <span>{{ czmLuminanceAtZenith }}</span>
        </div> -->
        <div class="images_relative_box">
            <label @dblclick="beDefault('czmMaximumMemoryUsage')"> {{ '显存' }}</label>
            <SliderTime :width="154" v-model:value="czmMaximumMemoryUsage" :min="512" :max="5120" :step="38"
                @change="czmMaximumMemoryUsageChange" :realVal="`${czmMaximumMemoryUsage}`" :disabled="!isshow" />
            <span>{{ czmMaximumMemoryUsage }}</span>
        </div>
    </RightList>
</template>